<template>
    <div class="dialog">
        <el-dialog :model-value="showProblemDetail" @update:model-value="handleVisibleChange" width="60%" style="margin-top: 40px;">
            <template #header>
                <div style=" font-size: 30px;">
                    <div style="float: left;margin-left: 50%;">{{getProblemType(chooseProblem.type,$t)}}</div>
                    <div style="margin-left: 60%;cursor: pointer;" @click="handleClick()">
                        <el-icon v-if="chooseProblem?.collected"><StarFilled style="color: yellowgreen;"/></el-icon>
                        <el-icon v-else ><Star/></el-icon>
                    </div>
                </div>
            </template>
            <div><h1>{{ $t('problemView.description') }}</h1></div>
            <div><el-text class="font">{{chooseProblem.problemDescribe}}</el-text></div>
            <div v-show="chooseProblem.problemCode"><h1>{{ $t('problemView.code') }}</h1></div>
            <div v-show="chooseProblem.problemCode"><pre><code :class=getCodeLanguge(chooseProblem.codeLanguage)>{{chooseProblem.problemCode}}</code></pre></div>
            <div v-show="chooseProblem.optionDescribe?.length>0"><h1>{{$t('problemView.options') }}</h1></div>
            <div v-show="chooseProblem.optionDescribe?.length>0">
                <div style="margin-top: 15px;" class="font" v-for="(options,index) in chooseProblem.optionDescribe" :key="index">
                    {{ String.fromCharCode(index+65)}}:{{options}}
                </div>
            </div>
            
            
            <div><h1>{{ $t('problemView.answerAnalysis') }}</h1></div>
            <div class="container">
                <div class="overlay" @click="hideAnswer=false" v-show="hideAnswer">{{ $t('problemView.clickMeShow') }}</div>  
                <div class="text">
                    <div><el-text class="font"><b>{{ $t('problemView.answer') }}</b>
                        <div v-for="answer in chooseProblem.answer" :key="answer">
                            {{answer}}
                        </div>
                    
                    </el-text></div>
                    <div style="margin-top: 10px;"><el-text class="font"><b>{{ $t('problemView.analysis') }}</b><div>{{chooseProblem.analysis }}</div></el-text></div>
                </div>  
            </div>
        </el-dialog>
    </div>


</template>


<script setup lang="ts">
    import {defineProps,defineEmits,watch} from 'vue'
    import useProblem from '@/hooks/useProblem'
    import useEnum from '@/base/useEnum'
    import useUser from '@/hooks/useUser';
    import Prism from 'prismjs'; 
    import { onMounted } from 'vue';
    const {chooseProblem,hideAnswer}=useProblem();
    const {getProblemType,getCodeLanguge} = useEnum()
    const {addUserProblemCollect,removeUserProblemCollect}=useUser()
    const emit = defineEmits(['update:someProp']);
    function handleVisibleChange(val) { 
        hideAnswer.value=true
        emit('update:someProp', val);
    }

    function handleClick(){
        try{
            if(chooseProblem?.value.collected){
                removeUserProblemCollect(chooseProblem.value.id)
                chooseProblem.value.collected=false
            }else{
                addUserProblemCollect(chooseProblem?.value.id,chooseProblem?.value.problemDescribe)
                chooseProblem.value.collected=true
            }
        }catch(e){
            console.log(e)
        }
    }

    const props=defineProps(['showProblemDetail','chooseProblem2'])


    onMounted(()=>{ 
        chooseProblem.value=props.chooseProblem2
        // Prism.highlightAll();
        setTimeout(()=>{Prism.highlightAll();},400)
    })

</script>

<style scoped>
    .font{
            font-size: 21px;
        }
        /* .look-answer{
            margin-top: 10px;
            display: flex;  
            justify-content: center;
        } */


        .container{
            position: relative;  
            width: 95%;  

            padding: 20px;  
            



        }


    .overlay {  
                
                backdrop-filter: blur(5px);
                position: absolute;  
                top: 0;  
                left: 0;  
                width: 100%;  
                height: 100%;  
                background-color: rgba(87, 86, 86, 0.5); 
                color: white;  
                cursor: pointer;  
                display: flex;  
                align-items: center;  
                justify-content: center;  
                z-index: 2;
            }  
            
            .text {  
                z-index: 1; 
                
            }

</style>